<template>
	<div>
<Son :title="textContent" :obj="peopleInfo" @sendMsg="getMsg">
	<h3 slot="header">标题党</h3>
	<div slot="bottom" slot-scope="props">
		<div>这里是底部</div>
		<div>底部文档</div>
		<div>{{props.title}}</div>
	</div>
</Son>

		<!--动画效果-->
		<div>
		<button @click="flag = !flag">Tougle</button>
		<transition name="fade">
			<div v-if="flag">内容</div>
		</transition>
		</div>
	</div>
	
</template>
<script>
import Son from './son'

export default{
		name:"compontentInsert",
		data(){
			return {
				color:"dd",
				textContent:"我是父级元素传递给子集元素的内容",
				peopleInfo:{
					name:"张雪娇",
					age:10
				},
				flag :true
			}
		},
		components:{
			Son
		},
		methods:{
			getMsg(data){
				console.log(data);
			}
		}
	}
</script>
<style scoped>
	.fade-enter-to,.fade-leave{
		opacity:1;
	}
	.fade-enter-active,.fade-leave-active{
		transition: opacity 0.5s
	}
	.fade-enter,.fade-leave-to{
		opacity:0;
	}

</style>